<template>
  <div class="image" @click="openBig">
    <el-image :src="url">
      <template #error>
        <div class="image-slot">
          <el-icon><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>
    <span class="text">{{ props.des }}</span>
  </div>
</template>

<script setup>
import { Picture as IconPicture } from '@element-plus/icons-vue'

const props = defineProps({
  img: String,
  des: String,
})

const url = new URL(props.img, import.meta.url).href

// 大图预览
const openBig = () => {
  ElMessageBox.alert(
    `<img src="${url}" style="max-width: 100%; height: auto; display: block; margin: 0 auto" />`,
    '预览',
    {
      dangerouslyUseHTMLString: true,
      draggable: true,
      confirmButtonText: '关闭',
    },
  )
}
</script>

<style scoped less="scss">
.image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 50%;
  margin: 10px auto;
  cursor: pointer;

  .el-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
  }

  .el-image:hover {
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  }

  .text {
    margin-top: 5px;
    font-size: 14px;
    color: gray;
  }
}
</style>
